<template>
  <el-dialog title="推荐度说明" v-model="dialogVisible" width="70%">
    <el-table border :data="[]" class="table-box" :span-method="objectSpanMethod">
      <el-table-column
        prop="blknm"
        label="预报断面"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="fcProj"
        label="预报项目"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="预报方案精度" align="center">
        <el-table-column prop="ccNum" label="总场次" align="center"></el-table-column>
        <el-table-column prop="qualNum" label="合格场次" align="center"></el-table-column>
        <el-table-column prop="rate" label="合格率(%)" align="center"></el-table-column>
        <el-table-column prop="grade" label="等级" align="center"></el-table-column>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script setup>
import { ref, defineExpose } from 'vue'
const dialogVisible = ref(false)

const handleOpenDialog = () => {
  dialogVisible.value = true
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 4 === 0) {
      return {
        rowspan: 4,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
defineExpose({ handleOpenDialog })
</script>
<style lang="less" scoped></style>
